<template>
  <view class="big">
    <view class="kong"></view>
    <view class="top">
      <view class="flexs1">
        <image class="back_img"
               src="../../static/image/ico_dh_bk@2x.png"
               @click="back"></image>
        <view class="top_kuang flexs1">
          <image class="border_serch"
                 src="../../static/image/ico_ss@2x.png"
                 mode=""></image>
          <input type="text"
                 placeholder-style="font-size: 28rpx; color:#999999;margin-top:10rpx;"
                 placeholder="输入真题、资料、公司名称"
                 v-model="name"
                 @confirm='searchinput'>
          <image class="close_img"
                 src="../../static/image/ico_gb@2x.png"
                 @click="clear"></image>
        </view>
      </view>
      <view class="lei_box flexs3">
        <view :class="state==1?'lei_title_new':'lei_title'"
              @click="choose(1)">文章</view>
        <view :class="state==2?'lei_title_new':'lei_title'"
              @click="choose(2)">课程</view>
        <view :class="state==3?'lei_title_new':'lei_title'"
              @click="choose(3)">试卷</view>
        <view :class="state==4?'lei_title_new':'lei_title'"
              @click="choose(4)">名企</view>
        <view :class="state==5?'lei_title_new':'lei_title'"
              @click="choose(5)">问答</view>
      </view>
      <scroll-view scroll-y="true"
                   @scrolltolower='onpullresh'
                   :refresher-triggered="triggered"
                   @refresherrefresh="onRefresh"
                   @refresherrestore="onRestore"
                   @refresherabort="stoprefresh"
                   refresher-enabled='true'
                   :refresher-threshold="50"
                   refresher-background="#f7f7f7">
        <!-- 搜索结果为空样式 -->
        <block v-if="state==1">
          <view class="none_box"
                v-if='articlelist.length == 0'>
            <view class="none_kong"></view>
            <image src="../../static/image/zcht_img_k@2x.png"></image>
            <view>暂无信息</view>
          </view>
          <view class="list_one flexs1"
                v-for="(item,index) in articlelist"
                :key="'1'+index"
                @click='goarticledetail(item.id,item.type)'>
            <image class="one_img"
                   :src="baseUrl+item.image"></image>
            <view class="list_one_right">
              <view class="one_title text-bold">{{item.name}}</view>
              <view class="one_time">{{item.createtime}}</view>
            </view>
          </view>
        </block>
        <block v-if="state==2">
          <view class="none_box"
                v-if="kechenglist.length==0">
            <view class="none_kong"></view>
            <image src="../../static/image/zcht_img_k@2x.png"></image>
            <view>暂无信息</view>
          </view>
          <view class="list_two flexs1"
                v-for="(item,index) in kechenglist"
                :key="'2'+index"
                @click='gokecheng(item.id)'>
            <view class="two_left">
              <image class="one_img"
                     :src="urls+item.image"></image>
              <view class="type_box"
                    v-show="item.type==2">面试</view>
              <view class="type_box"
                    v-show="item.type==1">笔试</view>
            </view>
            <view class="list_two_right">
              <view class="two_title text-bold">{{item.name}}</view>
              <view class="remen_right_mid flexs1">
                <image src="../../static/image/ss_ico_xx@2x.png"></image>
                <view>{{item.buy_num}}人已学习</view>
              </view>
              <view class="flexs2 two_right">
                <view class="tao_num">{{item.qb_count}}套真题</view>
                <view class="money"><text class="fuhao">￥</text>{{item.now_price}}</view>
              </view>
            </view>
          </view>
        </block>
        <block v-if="state==3">
          <view class="none_box"
                v-if='hottextpaperlist.length == 0'>
            <view class="none_kong"></view>
            <image src="../../static/image/zcht_img_k@2x.png"></image>
            <view>暂无信息</view>
          </view>
          <view class="creditbox"
                v-for="(item,index) in hottextpaperlist"
                :key="'3'+index"
                @click=gopaperdetail(item.id,item.is_buy)>
            <view class="chapterbox text-bold">{{item.name}}</view>
            <view class='secondview'>
              <view class='studentbox'>
                <image class='studenter'
                       src='../../static/image/ss_ico_xx@2x.png'></image>
                <view>{{item.answer_num}}人已学习</view>
              </view>
              <view class='timebox'>
                <image class='clocker'
                       src='../../static/image/sjxq_ico_sj@2x.png'></image>
                <view>答题时长: {{item.answer_time}}分钟</view>
              </view>
            </view>
          </view>
        </block>
        <block v-if="state==4">
          <view class="none_box"
                v-if='companylist.length == 0'>
            <view class="none_kong"></view>
            <image src="../../static/image/zcht_img_k@2x.png"></image>
            <view>暂无信息</view>
          </view>
          <view class="list_four"
                v-for="(item,index) in companylist"
                :key="'4'+index"
                @click='gocompanydetail(item.id)'>
            <view class="list_fourleft">
              <image class='one_img'
                     :src='baseUrl+item.image'></image>
            </view>
            <view class='list_fourright'>
              <view class='titltname'>{{item.name}}</view>
              <view v-html="item.analysis">
                <!-- {{item.analysis}} -->
              </view>
              <!-- <view class='sameclass'>校招时间:每年3-5月，9-11月</view>
							<view classzz='sameclass'>社招时间:时间不定</view>
							<view class='sameclass'>笔试形式:笔试</view>
							<view class='specialbox  sameclass'>测试题型:EPI阿斯蒂芬阿莎第三方昂范德萨水电费撒地方噶水电费阿萨德股份三</view> -->
            </view>
          </view>
        </block>
        <block v-if="state==5">
          <view class="none_box"
                v-if='answerlist.length == 0'>
            <view class="none_kong"></view>
            <image src="../../static/image/zcht_img_k@2x.png"></image>
            <view>暂无信息</view>
          </view>
          <view class='list_five'
                v-else>
            <view class='zombietitle'>问题列表({{answerlist.length}})</view>
            <view class='list_fiveitem'
                  v-for="(item,index) in answerlist"
                  :key="'5'+index"
                  @click='goquestiondetail(item.id)'>
              <view class='zombieimg'>{{item.class_name}}</view>
              <view class='contentzombie'>
                {{item.content}}
              </view>
              <view class='zombietime'>{{item.time_info}}</view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      state: 1,
      name: '',

      // 下拉按钮状态显示与否
      triggered: false,
      // 下拉按钮防抖
      freshing: '',

      page: 1,
      limit: 10,
      articlelist: [], //文章列表

      kechengpage: 1,
      kechenglimit: 10,
      kechenglist: [], //课程列表

      hottextpaperpage: 1,
      hottextpaperlimit: 10,
      hottextpaperlist: [], //试卷列表

      companypage: 1,
      companylimit: 10,
      companyresize: 0,
      companylist: [], //名企列表

      answerpage: 1,
      answerlimit: 10,
      answerresize: 0,
      answerlist: [], //问答列表

      urls: this.$serverIp,
      baseUrl: this.$serverIp,
      orderSn: '',
      price: '',
      ordernum: ''
    }
  },
  onLoad() {
    // this._getarticlelist() //默认获取文章
  },
  methods: {
    goarticledetail(id, type) {
      // 文章分类:1=招聘资讯，2=时政热点，3=经验技巧
      if (type == 1) {
        uni.navigateTo({
          url: '../news/news_det?id=' + id
        })
      } else if (type == 2) {
        uni.navigateTo({
          url: 'politics_det?id=' + id
        })
      } else {
        uni.navigateTo({
          url: 'experience_det?id=' + id
        })
      }
    },
    gocompanydetail(id) {
      //去公司详情
      uni.navigateTo({
        url: '../Kaoq/Famous_Det?id=' + id
      })
    },
    goquestiondetail(id) {
      uni.navigateTo({
        url: '../askquestion/answerquestiondetail?id=' + id
      })
    },
    gokecheng(id) {
      uni.navigateTo({
        url: '../data/kecheng?id=' + id
      })
    },
    async gopaperdetail(id, is_buy) {
      //去做题详情
      if (is_buy == 1) {
        uni.navigateTo({
          url: '../Brush/testDetL?id=' + id
        })
      } else {
        const { data } = await this.$http.post('/order/create', { type: 2, q_id: id })
        console.log(data)
        if (data.code == 1) {
          this.ordernum = res.data.data.id
          this.price = res.data.data.price
          this.orderSn = res.data.data.order_sn
          uni.navigateTo({
            url: '../payment/payment_other?oid=' + this.ordernum + '&price=' + this.price + '&id=' + id + '&orderSn=' + this.orderSn
          })
        }
      }
    },
    // 上拉触底刷新
    onpullresh() {
      console.log('上拉触底')
      switch (this.state) {
        case 1:
          this._getarticlelist()
          break
        case 2:
          this._getlist()
          break
        case 3:
          this._gethottextpaperlist()
          break
        case 4:
          if (this.companyresize != 0) {
            this.companypage++
            this._getcompanylist()
          }
          break
        case 5:
          if (this.answerresize != 0) {
            this.answerpage++
            this._getanswerlist()
          }
          break
      }
    },
    // 自定义下拉触发
    onRestore() {
      //this.triggered = 'restore'; // 需要重置
      this.triggered = false // 需要重置
    },
    onRefresh() {
      var that = this
      if (this.freshing) return
      //this.jiajianstatus = false//上拉触底改变状态，正常加载

      // 下拉刷新只有公司和问答有page,文章,课程,试卷没有
      switch (this.state) {
        case 1:
          this._getarticlelist()
          break
        case 2:
          this._getlist()
          break
        case 3:
          this._gethottextpaperlist()
          break
        case 4:
          this.companypage = 1
          this._getcompanylist()
          break
        case 5:
          this.answerpage = 1
          this._getanswerlist()
          break
      }

      this.freshing = true
      if (!this.triggered) {
        this.triggered = true
      }
      setTimeout(() => {
        that.triggered = false
        that.freshing = false
      }, 1000)
    },
    stoprefresh() {},
    back() {
      uni.navigateBack({
        delta: 1
      })
    },
    searchinput() {
      //搜索，判断是在那个状态下搜索
      this._getarticlelist()
      this._getlist()
      this._gethottextpaperlist()
      this._getcompanylist()
      this._getanswerlist()
      // switch(this.state){
      // 	case 1:
      // 		this._getarticlelist()
      // 	break;
      // 	case 2:
      // 		this._getlist();
      // 	break;
      // 	case 3:
      // 		this._gethottextpaperlist()
      // 	break;
      // 	case 4:
      // 		this._getcompanylist()
      // 	break;
      // 	case 5:
      // 		this._getanswerlist()
      // 	break;
      // }
    },
    async _getanswerlist() {
      //获取问答
      const { data } = await this.$http.post('/ask/show', { search: this.name, page: this.answerpage, pageSize: this.answerlimit })
      console.log(data)
      if (data.code == 1) {
        this.answerresize = data.data.length
        if (this.answerpage == 1) {
          this.answerlist = data.data
        } else {
          this.answerlist = this.answerlist.concat(data.data)
        }
      } else {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    },

    async _getarticlelist() {
      //获取文章
      const { data } = await this.$http.post('/zhang/Recruitinformation/search', { search: this.name })
      console.log(data)
      if (data.code == 1) {
        if (this.page == 1) {
          this.articlelist = data.data
        } else {
          this.articlelist = this.articlelist.concat(data.data)
        }
      } else {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    },
    async _getcompanylist() {
      //获取名企
      const { data } = await this.$http.post('/company/show', { search: this.name, page: this.companypage, pageSize: this.companylimit })
      console.log(data)
      if (data.code == 1) {
        this.companyresize = data.data.length
        if (this.companypage == 1) {
          this.companylist = data.data
        } else {
          this.companylist = this.companylist.concat(data.dat)
        }
      } else {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    },
    async _gethottextpaperlist() {
      //获取试卷
      const { data } = await this.$http.post('/question_bank/show', { search: this.name, is_hot: 1 })
      console.log(data)
      if (data.code == 1) {
        this.hottextpaperlist = data.data
      } else {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    },
    async _getlist() {
      //获取课程
      const { data } = await this.$http.post('/Curriculum/show', { is_hot: '', is_index: '', search: this.name, type: '', id_good: '', page: '', pageSize: '' })
      console.log(data)
      if (data.code == 1) {
        this.kechenglist = data.data
      } else {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    },
    choose(state) {
      this.state = state
      // if(state=='3'){
      // 	this._gethottextpaperlist()
      // }
      // if(state=='2'){
      // 	this._getlist()
      // }
      // if(state=='4'){
      // 	this._getcompanylist()
      // }
      // if(state=='5'){
      // 	this._getanswerlist()
      // }
      // if(state=='1'){
      // 	this._getarticlelist()
      // }
    },
    clear() {
      this.name = ''
    }
  }
}
</script>

<style>
.flexs1,
.flexs3 {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
}
.big {
  width: 100vw;
  height: 100vh;
}

.kong {
  width: 100%;
  height: var(--status-bar-height);
  background-color: #ffffff;
}

.top {
  width: 100%;
  height: 170rpx;
  background-color: #ffffff;
  padding-top: 16rpx;
}

.back_img {
  width: 20rpx;
  height: 36rpx;
  margin: 10rpx 20rpx 0 20rpx;
}

.top_kuang {
  width: 650rpx;
  height: 60rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  margin-left: -40rpx;
}

.border_serch {
  width: 28rpx;
  height: 30rpx;
  margin: 15rpx 20rpx 0 25rpx;
}

uni-input {
  width: 520rpx;
}

.close_img {
  width: 26rpx;
  height: 26rpx;
  margin-top: 15rpx;
  margin-right: 20rpx;
}

.lei_box {
  width: 100%;
  height: 60rpx;
  /*#ifdef APP-PLUS*/
  margin-top: 20rpx;
  /* #endif */
  margin-top: 26rpx;
}

.lei_title {
  width: 70rpx;
  height: 30rpx;
  line-height: 30rpx;
  font-size: 30rpx;
}

.lei_title_new {
  width: 66rpx;
  height: 42rpx;
  line-height: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  border-bottom: 2px solid #ffdd47;
}

.list_box {
  width: 100%;
  height: calc(100vh - 170rpx);
  padding-top: 20rpx;
  margin-top: 10rpx;
  /* border:1px solid red */
}

.none_box {
  width: 100%;
  height: 520rpx;
  font-size: 26rpx;
  color: #666666;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.none_kong {
  width: 100%;
  height: 168rpx;
}

.none_box image {
  width: 354rpx;
  height: 253rpx;
}

.list_one {
  width: 100%;
  height: 192rpx;
  background-color: #ffffff;
}

.one_img {
  width: 196rpx;
  height: 130rpx;
  border-radius: 10rpx;
  margin: 0 21rpx 0 29rpx;
}

.list_one_right {
  width: 465rpx;
  height: 192rpx;
  padding-top: 26rpx;
  border-bottom: 1px solid #f5f5f5;
}

.one_title {
  width: 100%;
  height: 94rpx;
  line-height: 42rpx;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.one_time {
  color: #999999;
  font-size: 24rpx;
}

.list_two {
  width: 100%;
  height: 210rpx;
  /* border-bottom: 1rpx solid red; */
  background-color: #ffffff;
}

.two_left {
  position: relative;
}

.type_box {
  width: 70rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  color: #fff;
  background: #ff3b30;
  border-radius: 10rpx 0rpx 10rpx 0rpx;
  font-size: 22rpx;
  position: absolute;
  top: 0rpx;
  left: 28rpx;
}

.list_two_right {
  width: 465rpx;
  height: 210rpx;
  padding-top: 26rpx;
  border-bottom: 1px solid #f5f5f5;
}

.remen_right_mid {
  height: 40rpx;
  font-size: 24rpx;
  color: #666666;
}

.remen_right_mid image {
  width: 28rpx;
  height: 26rpx;
  margin-right: 10rpx;
}

.money {
  width: 124rpx;
  font-size: 34rpx;
  font-weight: bold;
  color: #ff3b30;
}

.fuhao {
  font-size: 24rpx;
}

.tao_num {
  font-size: 20rpx;
  color: #999999;
}

.two_title {
  width: 100%;
  height: 80rpx;
  line-height: 38rpx;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.two_right {
  width: 94%;
}

/* 名企样式 */
.list_four {
  width: 100%;
  height: auto;
  /* height:210rpx; */
  /* border: 1rpx solid red; */
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 30rpx;
  /* padding-bottom: 30rpx; */
}

.list_fourright {
  height: auto;
  width: 66%;
  /* height:210rpx; */
  /* padding-top: 26rpx; */
  padding-bottom: 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.titltname {
  font-size: 26rpx;
  font-weight: 600;
  margin-bottom: 10rpx;
}
.sameclass {
  height: 36rpx;
  line-height: 36rpx;
  font-size: 26rpx;
}
.specialbox {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 问答 */
.list_five {
  width: 100%;
  padding: 0 30rpx;
  background-color: #ffffff;
  padding-bottom: 20rpx;
}
.zombietitle {
  height: 80rpx;
  line-height: 80rpx;
  color: #666666;
}
.list_fiveitem {
  height: auto;
  width: 100%;
  /* border:1rpx solid #EEEEEE; */
  border: 1rpx solid transparent;
  border-radius: 10rpx;

  box-shadow: 0px 2px 10px 0px rgba(15, 11, 2, 0.13);
  position: relative;
  padding: 20rpx 0rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}
.zombieimg {
  position: absolute;
  top: 0;
  right: 0;
  width: 90rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  font-size: 26rpx;
  border-bottom-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  background-color: #fa3a2b;
  /* background-image: url(../../static/image/ss_img_wd_bg@2x.png);
		background-position: 100% 100%;
		background-repeat: no-repeat; */
  color: #ffffff;
  line-height: 36rpx;
  text-align: center;
}
.contentzombie {
  overflow: hidden;
  /* border:1rpx solid red; */
  text-overflow: ellipsis;
  width: 533rpx;
  height: auto;
  line-height: 45rpx;
  /* padding: 10rpx 0; */
  padding-left: 20rpx;
  padding-bottom: 8rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.zombietime {
  padding-left: 20rpx;
  height: 40rpx;
  line-height: 40rpx;
  width: 610rpx;
  color: #b6b6b6;
}

/* 试卷里样式 */
.creditbox {
  height: 140rpx;
  width: 100%;
  background-color: #ffffff;
}
/* 这里不用两行超出隐藏 */
.chapterbox {
  height: 80rpx;
  line-height: 80rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 60rpx);
  margin: 0 auto;
}
.secondview {
  width: calc(100% - 60rpx);
  margin: 0 auto;
  height: 60rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  display: flex;
  align-items: center;
  color: #656565;
}
.studentbox {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}
.studenter {
  width: 28rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.timebox {
  align-items: center;
  display: flex;
}
.clocker {
  margin-right: 10rpx;
  width: 22rpx;
  height: 26rpx;
}
</style>
